<template>
    <view>
        <view class="tabbar-box" :style="tabbarBoxStyle">
            <view class="item" :class="active==='sindex'?'text-blue':'text-black'"
                  @click="utils.to_switch_tab('/pages/sindex/index')">
                <!-- <view class="iconfont icon-buoumaotubiao14"></view> -->
                <image v-if="active==='sindex'" class="sindex" src="../../static/tabbar/index_active.png" mode="aspectFit"></image>
                <image v-else class="sindex" src="../../static/tabbar/index.png" mode="aspectFit"></image>
                <view>首页</view>
            </view>
          <view  v-if="!isCircle" class="item" :class="active==='circle'?'text-blue':'text-black'"
                @click="utils.to_switch_tab('/pages/circle/index')">
            <image v-if="active==='circle'" class="sindex" src="../../static/tabbar/circle_active.png" mode="aspectFit"></image>
            <image v-else class="sindex" src="../../static/tabbar/circle.png" mode="aspectFit"></image>
            <view>康粉圈</view>
          </view>
			<view class="item" :class="active==='fuli'?'text-blue':'text-black'"
			      @click="utils.to_switch_tab('/pages/fuli/index')">
			    <image v-if="active==='fuli'" class="sindex" src="../../static/tabbar/fuli_chat_hove.png" mode="aspectFit"></image>
			    <image v-else class="sindex" src="../../static/tabbar/fuli.png" mode="aspectFit"></image>
			    <view>福利</view>
			</view>
            <view class="item" :class="active==='my'?'text-blue':'text-black'"
                  @click="utils.to_switch_tab('/pages/my/index')">
                <!-- <view class="iconfont icon-My"></view> -->
                <image v-if="active==='my'" class="sindex" src="../../static/tabbar/my_active.png" mode="aspectFit"></image>
                <image v-else class="sindex" src="../../static/tabbar/my.png" mode="aspectFit"></image>
                <view>我的</view>
            </view>
        </view>
    </view>
</template>
<script>
export default {
    name: "footer-menu",
    data(){return {
        menuData:[],
      isCircle:true,
      tabbarBoxStyle:""
    }},
    mounted() {},
    props:["active"],
    methods: {
      getElementHeight() {
        const query = uni.createSelectorQuery().in(this)
        const element = query.select('.tabbar-box').boundingClientRect(data => {
          uni.setStorageSync('footer-menu',data)
        }).exec()
      },
      getConfig()
      {
        this.$javaCircle.doRequest("post", "userservice/checkLine",'','').then(res => {
          this.isCircle=res.data.data===null?true:res.data.data;
        })
      },
      show(){
        this.tabbarBoxStyle="bottom:0rpx;"
      },
      hide(){
        this.tabbarBoxStyle="bottom:-200rpx;"
      }
    },
	created() {
    uni.hideTabBar();
    this.getElementHeight()
    this.getConfig()
	}
}
</script>
<style scoped>
	.tabbar-box{
		width: 100%;
		/* height: 128upx; */
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #fff;
		z-index: 20;
		box-shadow: 0px 2upx 10upx 0px rgba(0,0,0,0.1);
		padding-bottom: env(safe-area-inset-bottom);
    transition: all .2s linear;
	}
	.tabbar-box .item{
		width: 25%;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
	}
	.tabbar-box .item .sindex{
		width: 98upx;
		height: 70upx;

	}
</style>
